<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/summernote/summernote.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/summernote/summernote-bs3.css}" rel="stylesheet"/>
<link th:href="@{/_files/global.css}" rel="stylesheet"/>
<link th:href="@{/_files/style.css}" rel="stylesheet"/>
<link th:href="@{/_files/mystyle.css}" rel="stylesheet"/>
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/ajax/libs/select/select2.css}" rel="stylesheet"/>
<!--[if lt IE 9]>
<script th:src="@{/_files/html5.js}"></script><![endif]-->
<script th:src="@{/_files/common.js}"></script>
<script th:src="@{/_files/jquery.js}"></script>
<script th:src="@{/_files/layer/layer.js}"></script>
<script th:src="@{/_files/handlebars-v4.1.2.js}"></script>
<script th:src="@{/_files/front.js}"></script>

<script th:src="@{/ajax/libs/select/select2.js}"></script>
<script th:src="@{/js/vector.js}"></script>

<body class="white-bg">
<style>
    .content{
        margin-top:6px ;
    }
    .form-group{
        margin-bottom: 0px;
    }
    #category1,#category2,#category3{
        border: none!important;
        appearance:noe!important;
        -moz-appearance:inherit;
        -webkit-appearance:inherit;
        background-color: transparent;
    }
    #area1,#area2,#area3{
        border: none!important;
        appearance:noe!important;
        -moz-appearance:inherit;
        -webkit-appearance:inherit;
        background-color: transparent;
    }

    /*新增*/
    .search-input{
        border-radius: 4px 0 0 4px;
    }
    .ws{
        width: 100% !important;
        background: #09448c;
    }
    .w-main {
        width: 970px;
    }
    .center1 {
        margin-right: auto;
        margin-left: auto;
    }
    .listyle{
        min-width: 20%;
        text-align: center;
        color: #fff!important;
    }
    .listyle a::after {
        content: '';
        display: block;
        position: absolute;
        width: 2px;
        height: 20px;
        right: -1px;
        top: 15px;
        left: auto;
        bottom: auto;
        background: #fff;
    }
    .listyle a:hover{
        color: #ffff00!important;
    }
    .listyle:last-child a::after{
        background: transparent;
    }
    .nav .first {
        border-right: 0px solid #355C90;
    }
    .listyle a{
        font-size: 18px;
        color: #fff !important;
        font-weight: normal!important;
    }
    /*.listyle:nth-child(4) a{*/
    /*font-weight: bold !important;*/
    /*}*/
    .mt20 .count .nums{
        color: #46b1ff;
        font-weight: bold;
    }
    .centop{
        padding: 13px 0;
    }
    a.ap-curr{
        background-color: #46b1ff;
        color: #ffffff;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }
    #search{
        line-height: 30px;
        /*padding: 7px 15px;*/
        height: 30px;
        width: 56px;
        margin-left: -5px;
        vertical-align: middle;
        -webkit-border-radius: 0 4px 4px 0;
        -moz-border-radius: 0 4px 4px 0;
        border-radius: 0 4px 4px 0;
        background-color: #46b1ff;
    }
    #search-input{
        vertical-align: middle;
        -webkit-border-radius: 4px 0 0 4px;
        -moz-border-radius: 4px 0 0 4px;
        border-radius: 4px 0 0 4px;
        border: 1px solid #dcdfe6;
    }
    .centerbot{
        text-align: center;
    }
    .pagination>.active>a{
        background-color:#46b1ff;
        border: 1px solid #ddd;
    }
    .c-container .title a {
        font-size: 18px;
    }
    .c-container .rows span {
        font-size: 16px;
    }
    .w{
        width: 1170px!important;
    }
    .search-input {
        height: 34px;
    }

    .listyle a:hover{
        background-color:transparent !important;
    }
    .center2{
        margin: 0 auto;
    }
    .main1 {
        background: #f1f1f1;
        padding-top: 0px;
    }
    .main2 {
        background: #fff;
        padding: 20px 0px;
    }
    .form-group{
        line-height: 40px;
    }
</style>
<!-- LOGO开始 -->
<div class="w center centop" style="background-color:#0a8cd2;width:100%!important;">
    <div id="top-header" class="left" style="width:60%;">
        <a class="right block"
           style="width:100%;height:90px;background:url(../../../_files/img/logo.png) no-repeat ;background-size: 400px 160px;background-position:left center"
           href="/front"></a>
        <div class="clear"></div>
    </div>
    <!--<div id="top-search" class="right" style="width:40%;">
        <form th:action="@{/front/search}" method="get" style="margin:28px 0 0 20px;float: right;">
            <input type="text" name="deptId" th:value="${curr_child.deptId}" hidden>
            <input type="text" name="keyWords" value="" class="left search-input" style="width:280px;"
                   autocomplete="off"/>
            <button type="submit" class="left"
                    style="width:86px;height:34px;background:#09448c ;color:#fff;border:0;font-size: 14px;border-radius: 0 4px 4px 0;letter-spacing: 1px;">搜索
            </button>
            <div class="clear"></div>
        </form>
    </div>-->
    <div class="clear"></div>
</div>
<div class=" center ws">
    <ul class="list-unstyled nav w-main center1"
        style="height:52px;line-height:52px;/*background:url(_files/img/nav_bg.png)*/background:#09448c ">
        <li class="left listyle" th:each="node,iterStat:${nodes}">
            <a th:href="@{/front(deptId=${node.deptId},level=1)}"
               th:class="${node.curr}? 'nava fs14 item first curr' : 'nava fs14 item'"
               th:text="${node.deptName}">首页</a>
        </li>

    </ul>
    <div class="clear"></div>
</div>
<div class="wrapper wrapper-content animated fadeInRight ibox-content main1">
    <form class="form-horizontal w center2 main2" id="form-lvyou-info" th:object="${lvyou}">
        <input id="lvId" name="lvId" th:field="*{lvId}"  type="hidden">
        <input id="lvRoleName" name="lvRoleName" th:field="*{lvRoleName}"  type="hidden">
        <div class="form-group">
            <label class="col-sm-3 control-label">标题：</label>
            <div class="col-sm-8">
                <div id="lvTitle" class="content" name="lvTitle" th:utext="*{lvTitle}" type="text"></div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">变更日期：</label>
            <div class="col-sm-8">
                <div id="lvNewChangedate" name="lvNewChangedate"  th:utext="*{lvNewChangedate}" class="content" type="text"></div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">创建者：</label>
            <div class="col-sm-8">
                <div id="createBy" name="createBy" th:utext="*{createBy}" class="content" type="text"></div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">创建日期：</label>
            <div class="col-sm-8">
                <div id="newcreateTime" name="newcreateTime" th:utext="*{newcreateTime}" class="content" type="text"></div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">更新者：</label>
            <div class="col-sm-8">
                <div id="updateBy" name="updateBy" th:utext="*{updateBy}" class="content" type="text"></div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">更新日期：</label>
            <div class="col-sm-8">
                <div id="newupdateTime" name="newupdateTime" th:utext="*{newupdateTime}" class="content" type="text"></div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">图片：</label>
            <div class="col-sm-8">
                <div id="lvProcess" name="lvProcess" th:utext="*{lvProcess}" class="content" type="text"></div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">审批状态：</label>
            <div class="col-sm-8">
                <div id="lvStatus" name="lvStatus" th:utext="*{lvStatus}" class="content" type="text"></div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">信息来源：</label>
            <div class="col-sm-8">
                <div id="lvOriginal" name="lvOriginal" th:utext="*{lvOriginal}" class="content" type="text"></div>
            </div>
        </div>


        <div class="form-group">
            <label class="col-sm-3 control-label">一级类别：</label>
            <div class="col-sm-8">
                <div id="jtOriginal" name="jtOriginal" th:text="*{class1}" class="content" type="text"></div>

            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">二级类别：</label>
            <div class="col-sm-8">
                <div id="jtOriginal" name="jtOriginal" th:text="*{class2}" class="content" type="text"></div>

            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">三级类别：</label>
            <div class="col-sm-8" >
                <div id="jtOriginal" name="jtOriginal" th:text="*{class3}" class="content" type="text"></div>

            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">所在省：</label>
            <div class="col-sm-8">
                <div id="jtOriginal" name="jtOriginal" th:text="*{sheng}" class="content" type="text"></div>

            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">所在市：</label>
            <div class="col-sm-8">
                <div id="jtOriginal" name="jtOriginal" th:text="*{shi}" class="content" type="text"></div>

            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">所在县：</label>
            <div class="col-sm-8" >
                <div id="jtOriginal" name="jtOriginal" th:text="*{xian}" class="content" type="text"></div>

            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">批次：</label>
            <div class="col-sm-8">
                <div id="lvPici" name="lvPici" th:utext="*{lvPici}" class="content" type="text"></div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">审批机构：</label>
            <div class="col-sm-8">
                <div id="lvShenpijc" name="lvShenpijc" th:utext="*{lvShenpijc}" class="content" type="text"></div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">级别：</label>
            <div class="col-sm-8">
                <div id="lvLevels" name="lvLevels" th:utext="*{lvLevels}" class="content" type="text"></div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">详细内容：</label>
            <div class="col-sm-8">
                <div class="content" th:utext="*{lvDetails}"></div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">图面化：</label>
            <div class="col-sm-8" th:utext="*{avatar}">
                <!--<img id="avatar"  th:src="*{avatar}"></img>-->
            </div>
        </div>
    </form>

</div>
<!--<div id="container"><div id="output"></div></div>-->

<div th:include="include::footer"></div>
<script th:src="@{/ajax/libs/summernote/summernote.min.js}"></script>
<script th:src="@{/ajax/libs/summernote/summernote-zh-CN.js}"></script>
<script type="text/javascript" th:inline="javascript">
    var prefix = ctx + "system/lvyou";
    var prefix1 = ctx + "system/category"
    var prefix2 = ctx + "system/area"
    $(function() {

        var lb1 =   [[${lvyou.lvLb1}]];
        var lb2 =   [[${lvyou.lvLb2}]];
        var lb3 =   [[${lvyou.lvLb3}]];

        var szx1 =   [[${lvyou.lvProvince}]];
        var szx2 =   [[${lvyou.lvCity}]];
        var szx3 =   [[${lvyou.lvCountry}]];

        initCategrey(lb1,lb2,lb3);
        initArea(szx1,szx2,szx3);
        $('.summernote').summernote({
            height : '220px',
            lang : 'zh-CN',
            callbacks: {
                onImageUpload: function (files) {
                    sendFile(files[0], this);
                }
            }
        });
        var content = $("#lvDetails").val();
        $('#editor').summernote('code', content);
    });

    // 上传文件
    function sendFile(file, obj) {
        var data = new FormData();
        data.append("file", file);
        $.ajax({
            type: "POST",
            url: ctx + "common/upload",
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function(result) {
                if (result.code == web_status.SUCCESS) {
                    // $(obj).summernote('editor.insertImage', result.url, result.fileName);
                    $(obj).summernote('editor.insertImage', img_root + result.fileName, result.fileName);
                } else {
                    $.modal.alertError(result.msg);
                }
            },
            error: function(error) {
                $.modal.alertWarning("图片上传失败。");
            }
        });
    }

    $("#form-lvyou-info").validate({
        rules: {
            xxxx: {
                required: true,
            },
        }
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/info", $('#form-lvyou-info').serialize());
        }
    }

    function initCategrey(lvLb1,lvLb2,lvLb3) {


        cate1(lvLb1);
        cate2(lvLb1,lvLb2);
        cate3(lvLb2,lvLb3);
        $("#category1").change(function () {
            cate2($("#category1").val());

        });
        $("#category2").change(function () {
            cate3($("#category2").val());
        });

    }
    function cate1(id) {
        $.get(
            prefix1 + "/list?parentId=100&deptId=102",
            function (data) {
                if (data) {
                    var result = "";
                    $.each(data, function (n, value) {

                        if(value.deptId ==id )
                            result += "<option selected= 'true' value='" + value.deptId + "'>" + value.deptName + "</option>";
                        else
                            result += "<option value='" + value.deptId + "'>" + value.deptName + "</option>";

                    });
                    $("#category1").html(result);
                }
            }, "json");
    }

    function cate2(id,deptId) {
        $.get(
            prefix1 + "/list?parentId=102",
            function (data) {
                if (data) {
                    var result = "";
                    $.each(data, function (n, value) {

                        if(value.deptId ==deptId )
                            result += "<option selected= 'true' value='" + value.deptId + "'>" + value.deptName + "</option>";
                        else
                            result += "<option value='" + value.deptId + "'>" + value.deptName + "</option>";

                    });
                    $("#category2").html(result);

                }
            }, "json");
    }
    function cate3(id,deptId) {
        $.get(
            prefix1 + "/list?parentId=" + id ,
            function (data) {
                if (data) {
                    var result = '';
                    $.each(data, function (n, value) {
                        if(value.deptId ==deptId )
                            result += "<option selected= 'true' value='" + value.deptId + "'>" + value.deptName + "</option>";
                        else
                            result += "<option value='" + value.deptId + "'>" + value.deptName + "</option>";
                    });

                    $("#category3").html(result);
                }
            }, "json");
    }

    function initArea(lvProvince,lvCity,lvCountry) {


        farea1(lvProvince);
        farea21(lvProvince,lvCity);
        farea3(lvCity,lvCountry);
        $("#area1").change(function () {
            farea2($("#area1").val());

        });
        $("#area2").change(function () {
            farea3($("#area2").val());
        });

    }
    function farea1(id) {
        $.get(
            prefix2 + "/list?parentId=1",
            function (data) {
                if (data) {
                    var result = "";
                    $.each(data, function (n, value) {

                        if(value.deptId ==id )
                            result += "<option selected= 'true' value='" + value.deptId + "'>" + value.deptName + "</option>";
                        else
                            result += "<option value='" + value.deptId + "'>" + value.deptName + "</option>";

                    });
                    $("#area1").html(result);
                }
            }, "json");
    }

    function farea2(id,deptId) {
        $.get(
            prefix2 + "/list?parentId="+ id,
            function (data) {
                if (data) {
                    var result = "";
                    $.each(data, function (n, value) {


                        if(value.deptId ==deptId )
                        {
                            result += "<option selected= 'true' value='" + value.deptId + "'>" + value.deptName + "</option>";
                        }
                        else
                        {
                            result += "<option value='" + value.deptId + "'>" + value.deptName + "</option>";
                            if(n==0)
                            {
                                farea3(value.deptId);
                            }
                        }
                    });
                    $("#area2").html(result);

                }
            }, "json");
    }

    function farea21(id,deptId) {
        $.get(
            prefix2 + "/list?parentId="+ id,
            function (data) {
                if (data) {
                    var result = "";
                    $.each(data, function (n, value) {


                        if(value.deptId ==deptId )
                        {
                            result += "<option selected= 'true' value='" + value.deptId + "'>" + value.deptName + "</option>";
                        }
                        else
                        {
                            result += "<option value='" + value.deptId + "'>" + value.deptName + "</option>";
                        }
                    });
                    $("#area2").html(result);

                }
            }, "json");
    }

    function farea3(id,deptId) {
        $.get(
            prefix2 + "/list?parentId=" + id ,
            function (data) {
                if (data) {
                    var result = '';
                    $.each(data, function (n, value) {
                        if(value.deptId ==deptId )
                            result += "<option selected= 'true' value='" + value.deptId + "'>" + value.deptName + "</option>";
                        else
                            result += "<option value='" + value.deptId + "'>" + value.deptName + "</option>";
                    });

                    $("#area3").html(result);
                }
            }, "json");
    }

    var victor = new Victor("container", "output");

</script>
</body>
</html>
